<template>
  <div>
    <div class="bottomNav">
      <div @click="activeChange(1)">
        <router-link to="/home">
          <div v-if="nums != 1">
            <img src="@/icon/home.png" alt="" />
          </div>
          <div v-else>
            <img src="@/icon/home1.png" alt="" />
          </div>
          <div>主页</div>
        </router-link>
      </div>
      <div @click="activeChange(2)">
        <router-link to="/search">
          <div v-if="nums != 2">
            <img src="@/icon/search1.png" alt="" />
          </div>
          <div v-else>
            <img src="@/icon/search.png" alt="" />
          </div>
          <div>搜索</div>
        </router-link>
      </div>
      <div @click="activeChange(3)">
        <router-link to="/collect">
          <div v-if="nums != 3">
            <img src="@/icon/shuqian.png" alt="" />
          </div>
          <div v-else>
            <img src="@/icon/shuqian1.png" alt="" />
          </div>
          <div>排行榜</div>
        </router-link>
      </div>
      <div @click="activeChange(4)">
        <router-link to="/user">
          <div v-if="nums != 4">
            <img src="@/icon/user1.png" alt="" />
          </div>
          <div v-else>
            <img src="@/icon/user.png" alt="" />
          </div>
          <div>用户</div>
        </router-link>
      </div>
    </div>
    <div class="tianchong"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      nums: 1,
      iconWidth: 60,
    };
  },
  methods: {
    activeChange(s) {
      this.nums = s;
    },
  },
  mounted() {
    let ss = this.$route.path;
      
      if (ss == "/") {
        this.nums = 1;
      } else if (ss == "/search") {
        this.nums = 2;
      } else if (ss == "/collect") {
        this.nums = 3;
      } else if (ss == "/user") {
        this.nums = 4;
      }
  },
};
</script>

<style lang="less" scoped>
a {
  font-weight: bold;
  color: @color;
  text-decoration: none;
  img:nth-child(1) {
    display: block;
  }
  img:nth-child(2) {
    display: none;
  }
  &.router-link-exact-active {
    color: @color1;

    img:nth-child(2) {
      display: block;
    }
  }
}

.bottomNav {
  
  width: 100vw;
  height: 45rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: @color3;
  color: color;
  font-size: 14rem;
  padding-top: 10rem;
  padding-bottom: 20rem;
  z-index: 9999;
  >div>a{
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  img {
    width: 24rem;
    height: 24rem;
  }
}
//填充空白
.tianchong {
  height: 75rem;
  width: 100vw;
  background-color: @color3;
}
</style>